// vim: sw=4:ts=4:nu:nospell:fdc=4
/**
 * Grid in an inactive tab example
 * 
 * @author Ing. Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date 10. April 2008
 * @version $Id: dyntab.js 147 2009-04-11 13:31:30Z jozo $
 * 
 * @license dyntab.js is licensed under the terms of the Open Source LGPL 3.0
 *          license. Commercial use is permitted to the extent that the
 *          code/component(s) do NOT become part of another Open Source or
 *          Commercially licensed development library or toolkit without
 *          explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */

/* global Ext, Example */

Ext.ns('Example');

Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';

// example form
// {{{
Example.Form = Ext.extend(Ext.form.FormPanel, {

			// defaults - can be changed from outside
			border : false,
			frame : true,
			labelWidth : 80,
			url : 'formloadsubmit.php'

			,
			initComponent : function() {

				// hard coded - cannot be changed from outsid
				var config = {
					defaultType : 'textfield',
					defaults : {
						anchor : '-24'
					},
					monitorValid : true
					// ,buttonAlign:'right'
					,
					items : [{
								name : 'firstName',
								fieldLabel : 'First Name'
							}, {
								name : 'lastName',
								fieldLabel : 'Last Name',
								allowBlank : false
							}, {
								name : 'email',
								fieldLabel : 'E-mail',
								vtype : 'email'
							}, {
								name : 'friend',
								fieldLabel : 'Friend',
								xtype : 'xcheckbox'
							}, {
								name : 'owed',
								fieldLabel : 'Owed Sum',
								xtype : 'numberfield'
							}, {
								name : 'category',
								fieldLabel : 'Category',
								xtype : 'combo',
								triggerAction : 'all',
								mode : 'local',
								editable : false,
								store : new Ext.data.SimpleStore({
											fields : ['catCode', 'catName'],
											data : [['cat1', 'Category 1'],
													['cat2', 'Category 2']]
										}),
								displayField : 'catName',
								valueField : 'catCode',
								hiddenName : 'category'
							}, {
								name : 'note',
								fieldLabel : 'Note',
								xtype : 'textarea'
							}],
					buttons : [{
								text : 'Load',
								scope : this,
								handler : this.onLoadClick
							}, {
								text : 'Submit',
								formBind : true,
								scope : this,
								handler : this.submit
							}]
				}; // eo config object

				// apply config
				Ext.apply(this, Ext.apply(this.initialConfig, config));

				// call parent
				Example.Form.superclass.initComponent.apply(this, arguments);

			} // eo function initComponent

			/**
			 * Form onRender override
			 */
			,
			onRender : function() {

				// call parent
				Example.Form.superclass.onRender.apply(this, arguments);

				// set wait message target
				this.getForm().waitMsgTarget = this.getEl();

			} // eo function onRender

			/**
			 * Load button click handler
			 */
			,
			onLoadClick : function() {
				this.load({
							url : this.url,
							waitMsg : 'Loading...',
							params : {
								cmd : 'load'
							}
						});
				// any additional load click processing here
			} // eo function onLoadClick

			/**
			 * Submits the form. Called after Submit buttons is clicked
			 * 
			 * @private
			 */
			,
			submit : function() {
				this.getForm().submit({
							url : this.url,
							scope : this,
							success : this.onSuccess,
							failure : this.onFailure,
							params : {
								cmd : 'save'
							},
							waitMsg : 'Saving...'
						});
			} // eo function submit

			/**
			 * Success handler
			 * 
			 * @param {Ext.form.BasicForm}
			 *            form
			 * @param {Ext.form.Action}
			 *            action
			 * @private
			 */
			,
			onSuccess : function(form, action) {
				Ext.Msg.show({
							title : 'Success',
							msg : 'Form submitted successfully',
							modal : true,
							icon : Ext.Msg.INFO,
							buttons : Ext.Msg.OK
						});
			} // eo function onSuccess

			/**
			 * Failure handler
			 * 
			 * @param {Ext.form.BasicForm}
			 *            form
			 * @param {Ext.form.Action}
			 *            action
			 * @private
			 */
			,
			onFailure : function(form, action) {
				this.showError(action.result.error
						|| action.response.responseText);
			} // eo function onFailure

			/**
			 * Shows Message Box with error
			 * 
			 * @param {String}
			 *            msg Message to show
			 * @param {String}
			 *            title Optional. Title for message box (defaults to
			 *            Error)
			 * @private
			 */
			,
			showError : function(msg, title) {
				title = title || 'Error';
				Ext.Msg.show({
							title : title,
							msg : msg,
							modal : true,
							icon : Ext.Msg.ERROR,
							buttons : Ext.Msg.OK
						});
			} // eo function showError

		}); // eo extend

// register xtype
Ext.reg('exampleform', Example.Form);
// }}}
// example grid
// {{{
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
			initComponent : function() {
				var config = {
					store : new Ext.data.JsonStore({
								id : 'company',
								totalProperty : 'totalCount',
								root : 'rows',
								url : 'get-grid-data.php',
								fields : [{
											name : 'company'
										}, {
											name : 'price',
											type : 'float'
										}, {
											name : 'change',
											type : 'float'
										}, {
											name : 'pctChange',
											type : 'float'
										}, {
											name : 'lastChange',
											type : 'date',
											dateFormat : 'n/j h:ia'
										}, {
											name : 'industry'
										}, {
											name : 'desc'
										}]
							}),
					columns : [{
								id : 'company',
								header : "Company",
								width : 40,
								sortable : true,
								dataIndex : 'company'
							}, {
								header : "Industry",
								width : 30,
								sortable : true,
								dataIndex : 'industry'
							}, {
								header : "Price",
								width : 20,
								sortable : true,
								renderer : Ext.util.Format.usMoney,
								dataIndex : 'price'
							}, {
								header : "Change",
								width : 20,
								sortable : true,
								dataIndex : 'change'
							}, {
								header : "% Change",
								width : 20,
								sortable : true,
								dataIndex : 'pctChange'
							}, {
								header : "Last Updated",
								width : 20,
								sortable : true,
								renderer : Ext.util.Format
										.dateRenderer('m/d/Y'),
								dataIndex : 'lastChange'
							}],
					viewConfig : {
						forceFit : true,
						onRowOver : Ext.grid.GridView.prototype.onRowOver
								.createSequence(function(e, t) {
											if (!this.grid.tip) {
												this.grid.tip = new Ext.Tip({
															renderTo : Ext
																	.getBody()
														});
											}
											var row = this.findRowIndex(t);
											if (row !== false) {
												if (row !== this.lastTipRow) {
													this.grid.tip.body
															.update(this.grid.store
																	.getAt(row)
																	.get('company'));
													this.lastTipRow = row;
												}
												this.grid.tip.showBy(t);
											}
										}),
						onRowOut : Ext.grid.GridView.prototype.onRowOut
								.createSequence(function() {
											this.grid.tip.hide();
											this.lastTipRow = false;
										})
					},
					loadMask : true,
					plugins : [new Ext.ux.grid.Search()]
				}; // eo config object

				// apply config
				Ext.apply(this, Ext.apply(this.initialConfig, config));

				this.bbar = new Ext.PagingToolbar({
							store : this.store,
							displayInfo : true,
							pageSize : 10
						});

				// call parent
				Example.Grid.superclass.initComponent.apply(this, arguments);

				// load the store at the latest possible moment
				this.on({
							afterlayout : {
								scope : this,
								single : true,
								fn : function() {
									this.store.load({
												params : {
													start : 0,
													limit : 10
												}
											});
								}
							}
						});

			} // eo function initComponent

			,
			afterRender : function() {
				Example.Grid.superclass.afterRender.apply(this, arguments);
				// var view = this.getView();
				// this.tip = new Ext.Tip({
				// renderTo:document.body
				// });
				// 
				// view.onRowOver = function() {
				// console.log(arguments);
				// }
				// this.view.onRowOver =
				// this.view.onRowOver.createSequence(function(e, t) {
				// console.log(this, e, t);
				// });
			} // eo function afterRender
		});

Ext.reg('examplegrid', Example.Grid);
// }}}

// application main entry point
Ext.onReady(function() {

	Ext.QuickTips.init();

	// create and show window
	var win = new Ext.Window({
		renderTo : Ext.getBody(),
		title : Ext.get('page-title').dom.innerHTML,
		width : 500,
		height : 375,
		plain : true,
		layout : 'fit',
		border : false,
		closable : false,
		items : [{
			xtype : 'tabpanel',
			defaults : {
				layout : 'fit'
			},
			activeItem : 0,
			enableTabScroll : true,
			items : [{
				title : 'Instructions',
				id : 'firsttab',
				iconCls : 'icon-info',
				bodyStyle : 'font-family:sans-serif;font-size:12px;padding:10px',
				html : 'Click on toolbar buttons to add tabs.'
			}],
			tbar : [{
						text : 'Add Grid',
						iconCls : 'icon-plus',
						handler : function() {
							var tp = win.items.itemAt(0);
							tp.add({
										title : 'Grid',
										xtype : 'examplegrid',
										autoScroll : true
									});
						}
					}, {
						text : 'Add Grid and Activate Tab',
						iconCls : 'icon-plus',
						handler : function() {
							var tp = win.items.itemAt(0);
							var tab = tp.add({
										title : 'Active Grid',
										xtype : 'examplegrid',
										autoScroll : true
									});
							tp.setActiveTab(tab);
						}
					}, {
						text : 'Add Form',
						iconCls : 'icon-plus',
						handler : function() {
							var tp = win.items.itemAt(0);
							var tab = tp.add({
										title : 'Form',
										layout : 'form',
										xtype : 'exampleform'
									});
						}
					}, {
						text : 'Add Panel',
						iconCls : 'icon-plus',
						handler : function() {
							var tp = win.items.itemAt(0);
							var tab = tp.add({
								title : 'Panel',
								html : 'Simple panel content.',
								bodyStyle : 'font-family:sans-serif;font-size:12px;padding:10px'
							});
						}
					}]
		}]
	});
	win.show();

}); // eo function onReady

// eof
